﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>编辑系统设置</title>
    <link rel="stylesheet" href="~/lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="~/css/default/style.css">
</head>

<body class="mainbody">
    <div id="app" v-cloak>
        <div class="location">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>
                    <i class="el-icon-s-home"></i>
                    管理中心
                </el-breadcrumb-item>
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>系统设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="content-box" v-loading="loading">
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="基本信息" name="info">
                    <div class="tab-content">
                        <el-form ref="editForm1" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
                            <el-form-item prop="webName" label="主站名称">
                                <el-input v-model="model.webName" placeholder="任意字符，控制在255字符内"></el-input>
                            </el-form-item>
                            <el-form-item prop="webUrl" label="主站域名">
                                <el-input v-model="model.webUrl" placeholder="必填，以http://开头"></el-input>
                            </el-form-item>
                            <el-form-item prop="webVersion" label="系统版本">
                                <el-input v-model="model.webVersion" placeholder="必填，系统版本号"></el-input>
                            </el-form-item>
                            
                            <el-form-item label="公司名称">
                                <el-input v-model="model.webCompany" placeholder="可空，控制在128字符内"></el-input>
                            </el-form-item>
                            <el-form-item label="通讯地址">
                                <el-input v-model="model.webAddress" placeholder="可空，控制在128字符内"></el-input>
                            </el-form-item>
                            <el-form-item label="联系电话">
                                <el-input v-model="model.webTel" placeholder="可空，区号+电话号码"></el-input>
                            </el-form-item>
                            <el-form-item label="传真号码">
                                <el-input v-model="model.webFax" placeholder="可空，区号+传真号码"></el-input>
                            </el-form-item>
                            <el-form-item label="管理员邮箱">
                                <el-input v-model="model.webFax" placeholder="可空，电子邮箱格式"></el-input>
                            </el-form-item>
                            <el-form-item label="主站备案号">
                                <el-input v-model="model.webFax" placeholder="可空，控制在128字符内"></el-input>
                            </el-form-item>
                            <el-form-item label="开启管理日志">
                                <el-switch :active-value="1" :inactive-value="0" v-model="model.logStatus"></el-switch>
                            </el-form-item>
                            <el-form-item label="网站运行状态">
                                <el-switch :active-value="0" :inactive-value="1" v-model="model.webStatus"></el-switch>
                            </el-form-item>
                            <el-form-item label="网站关闭原因">
                                <el-input type="textarea" :rows="3" v-model="model.webCloseReason" maxlength="512" show-word-limit></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="短信平台" name="sms">
                    <div class="tab-content">
                        <el-form ref="editForm2" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
                            <el-form-item prop="smsApiUrl" label="短信API地址">
                                <el-input v-model="model.smsApiUrl" placeholder="以“http://”开头"></el-input>
                            </el-form-item>
                            <el-form-item prop="smsUserName" label="平台登录账户">
                                <el-input v-model="model.smsUserName" placeholder="短信账户注册的用户名"></el-input>
                            </el-form-item>
                            <el-form-item prop="smsPassword" label="平台通讯密钥">
                                <el-input show-password v-model="model.smsPassword" placeholder="开通短信账户设置的通讯密钥"></el-input>
                            </el-form-item>
                            <el-form-item label="短信账户余额">
                                <span v-if="smsquantity>=0">{{smsquantity}} 条</span>
                                <el-button :loading="smsloading" @@click="getSmsQuantity()" size="mini">查询余额</el-button>
                            </el-form-item>
                            <el-form-item label="短信平台说明">
                                请不要使用系统默认账户test，因为它是公用的测试账号；<br />
                                请在短信平台修改账户资料中绑定签名方可使用短信功能；<br />
                                如果您尚未申请开通，<a href="http://www.dtcms.net" target="_blank">请点击这里注册</a>均可正常使用
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="邮箱设置" name="email">
                    <div class="tab-content">
                        <el-form ref="editForm3" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
                            <el-form-item label="SSL加密连接">
                                <el-switch :active-value="1" :inactive-value="0" v-model="model.emailSSL"></el-switch>
                            </el-form-item>
                            <el-form-item prop="emailSmtp" label="STMP服务器">
                                <el-input v-model="model.emailSmtp" placeholder="发送邮件的SMTP服务器地址"></el-input>
                            </el-form-item>
                            <el-form-item prop="emailPort" label="SMTP端口">
                                <el-input v-model="model.emailPort" placeholder="SMTP服务器端口，一般是25"></el-input>
                            </el-form-item>
                            <el-form-item prop="emailFrom" label="发件人地址">
                                <el-input v-model="model.emailFrom" placeholder="发件人邮箱地址"></el-input>
                            </el-form-item>
                            <el-form-item prop="emailUserName" label="邮箱账号">
                                <el-input v-model="model.emailUserName"></el-input>
                            </el-form-item>
                            <el-form-item prop="emailPassword" label="邮箱密码">
                                <el-input show-password v-model="model.emailPassword"></el-input>
                            </el-form-item>
                            <el-form-item prop="emailNickname" label="发件人昵称">
                                <el-input v-model="model.emailNickname" placeholder="邮件里显示的昵称"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="上传设置" name="upload">
                    <div class="tab-content">
                        <el-form ref="editForm4" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
                            <el-form-item prop="filePath" label="上传目录名">
                                <el-input v-model="model.filePath" placeholder="文件夹目录名称"></el-input>
                            </el-form-item>
                            <el-form-item prop="fileSave" label="文件保存方式">
                                <el-select v-model="model.fileSave" placeholder="请选择...">
                                    <el-option label="按年月日每天一个目录" :value="1"></el-option>
                                    <el-option label="按年月/日/存入不同目录" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="编辑器图片">
                                <el-radio-group v-model="model.fileRemote">
                                    <el-radio-button label="0">禁止下载</el-radio-button>
                                    <el-radio-button label="1">自动下载</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item prop="fileExtension" label="文件上传类型">
                                <el-input v-model="model.fileExtension" placeholder="以英文逗号分隔开,如:“jpg,png”"></el-input>
                            </el-form-item>
                            <el-form-item prop="videoExtension" label="视频上传类型">
                                <el-input v-model="model.videoExtension" placeholder="以英文逗号分隔开,如:“mp4,flv”"></el-input>
                            </el-form-item>
                            <el-form-item prop="attachSize" label="附件上传大小">
                                <el-input v-model="model.attachSize" placeholder="单位KB，0不限制">
                                    <template slot="append">KB</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="videoSize" label="视频上传大小">
                                <el-input v-model="model.videoSize" placeholder="单位KB，0不限制">
                                    <template slot="append">KB</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="imgSize" label="图片上传大小">
                                <el-input v-model="model.imgSize" placeholder="单位KB，0不限制">
                                    <template slot="append">KB</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="图片最大尺寸">
                                <el-col :span="11">
                                    <el-input v-model="model.imgMaxHeight" style="width:100%;" placeholder="高度">
                                        <template slot="append">高/px</template>
                                    </el-input>
                                </el-col>
                                <el-col class="line" :span="2">*</el-col>
                                <el-col :span="11" :rules="rules.imgSize">
                                    <el-input v-model="model.imgMaxWidth" style="width:100%;" placeholder="宽度">
                                        <template slot="append">宽/px</template>
                                    </el-input>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="缩略图尺寸">
                                <el-col :span="11">
                                    <el-input v-model="model.thumbnailHeight" style="width:100%;" placeholder="高度">
                                        <template slot="append">高/px</template>
                                    </el-input>
                                </el-col>
                                <el-col class="line" :span="2">*</el-col>
                                <el-col :span="11">
                                    <el-input v-model="model.thumbnailWidth" style="width:100%;" placeholder="宽度">
                                        <template slot="append">宽/px</template>
                                    </el-input>
                                </el-col>
                            </el-form-item>
                            <el-form-item prop="thumbnailMode" label="缩略图生成方式">
                                <el-radio-group v-model="model.thumbnailMode">
                                    <el-radio-button label="Cut">中心裁剪</el-radio-button>
                                    <el-radio-button label="HW">两边补白</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item prop="watermarkType" label="图片水印类型">
                                <el-radio-group v-model="model.watermarkType">
                                    <el-radio-button label="0">不启用</el-radio-button>
                                    <el-radio-button label="1">文字水印</el-radio-button>
                                    <el-radio-button label="2">图片水印</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item prop="watermarkPosition" label="图片水印位置">
                                <el-select v-model="model.watermarkPosition" placeholder="请选择...">
                                    <el-option label="左上" :value="1"></el-option>
                                    <el-option label="中上" :value="2"></el-option>
                                    <el-option label="右上" :value="3"></el-option>
                                    <el-option label="左中" :value="4"></el-option>
                                    <el-option label="居中" :value="5"></el-option>
                                    <el-option label="右中" :value="6"></el-option>
                                    <el-option label="左下" :value="7"></el-option>
                                    <el-option label="中下" :value="8"></el-option>
                                    <el-option label="右下" :value="9"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="watermarkPic" label="图片水印文件">
                                <el-input v-model="model.watermarkPic" placeholder="需存放wwwroot根目录下,没有使用文字水印"></el-input>
                            </el-form-item>
                            <el-form-item label="图片生成质量">
                                <el-slider v-model="model.watermarkImgQuality"></el-slider>
                            </el-form-item>
                            <el-form-item label="水印透明度">
                                <el-slider v-model="model.watermarkTransparency" :max="10"></el-slider>
                            </el-form-item>
                            <el-form-item prop="watermarkFont" label="水印字体">
                                <el-select v-model="model.watermarkFont" placeholder="请选择...">
                                    <el-option label="Arial" value="Arial"></el-option>
                                    <el-option label="Symbol" value="Symbol"></el-option>
                                    <el-option label="Tahoma" value="Tahoma"></el-option>
                                    <el-option label="Verdana" value="Verdana"></el-option>
                                    <el-option label="仿宋_GB2312" value="仿宋_GB2312"></el-option>
                                    <el-option label="宋体" value="宋体"></el-option>
                                    <el-option label="新宋体" value="新宋体"></el-option>
                                    <el-option label="楷体_GB2312" value="楷体_GB2312"></el-option>
                                    <el-option label="微软雅黑" value="微软雅黑"></el-option>
                                    <el-option label="黑体" value="黑体"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="watermarkText" label="水印文字">
                                <el-input v-model="model.watermarkText" placeholder="文字水印的内容"></el-input>
                            </el-form-item>
                            <el-form-item prop="watermarkFontSize" label="文字大小px">
                                <el-input v-model="model.watermarkFontSize" placeholder="文字水印的大小">
                                    <template slot="append">px</template>
                                </el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="footer-box">
            <div class="footer-btn">
                <el-button type="primary" @@click="submitForm">确认保存</el-button>
                <el-button plain @@click="resetForm">取消返回</el-button>
            </div>
        </div>
    </div>

    <script src="~/lib/vue/vue.js"></script>
    <script src="~/lib/element-ui/index.js"></script>
    <script src="~/lib/axios/axios.min.js"></script>
    <script src="~/lib/babel-polyfill/polyfill.min.js"></script>
    <script src="~/js/axios.config.js"></script>
    <script src="~/js/upload.component.js"></script>
    <script>
        //初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                activeName: 'info',//当前选项卡
                labelPosition: 'right',//表单对齐方式
                loading: false,
                smsloading: false,
                smsquantity: -1,
                model: {
                    webName: null,
                    webUrl: null,
                    webVersion: null,
                    webCompany: null,
                    webAddress: null,
                    webTel: null,
                    webFax: null,
                    webMail: null,
                    webCrod: null,
                    logStatus: null,
                    webStatus: 0,
                    webCloseReason: null,
                    smsApiUrl: null,
                    smsUserName: null,
                    smsPassword: null,
                    emailSmtp: null,
                    emailSSL: 0,
                    emailPort: 0,
                    emailFrom: null,
                    emailUserName: null,
                    emailPassword: null,
                    emailNickname: null,
                    filePath: null,
                    fileSave: 0,
                    fileRemote: 0,
                    fileExtension: null,
                    videoExtension: null,
                    attachSize: 0,
                    videoSize: 0,
                    imgSize: 0,
                    imgMaxHeight: 0,
                    imgMaxWidth: 0,
                    thumbnailHeight: 0,
                    thumbnailWidth: 0,
                    thumbnailMode: null,
                    watermarkType: 0,
                    watermarkPosition: 0,
                    watermarkImgQuality: 0,
                    watermarkPic: null,
                    watermarkTransparency: 0,
                    watermarkText: null,
                    watermarkFont: null,
                    watermarkFontSize: 0
                },
                rules: {
                    webName: [
                        { required: true, message: '请填写主站的名称', trigger: 'blur' }
                    ],
                    webUrl: [
                        { required: true, message: '请填写主站的域名', trigger: 'blur' }
                    ],
                    webVersion: [
                        { required: true, message: '请填写系统版本号', trigger: 'blur' }
                    ],
                    smsApiUrl: [
                        { required: true, message: '请填写短信API地址', trigger: 'blur' }
                    ],
                    smsUserName: [
                        { required: true, message: '请填写平台登录账户', trigger: 'blur' }
                    ],
                    smsPassword: [
                        { required: true, message: '请填写平台通讯密钥', trigger: 'blur' }
                    ],
                    emailSmtp: [
                        { required: true, message: '请填写邮箱SMTP服务器地址', trigger: 'blur' }
                    ],
                    emailPort: [
                        { required: true, message: '请填写邮箱SMTP服务器端口', trigger: 'blur' }
                    ],
                    emailFrom: [
                        { required: true, message: '请填写邮箱发件人地址', trigger: 'blur' }
                    ],
                    emailUserName: [
                        { required: true, message: '请填写邮箱账号', trigger: 'blur' }
                    ],
                    emailPassword: [
                        { required: true, message: '请填写邮箱密码', trigger: 'blur' }
                    ],
                    emailNickname: [
                        { required: true, message: '请填写发件人昵称', trigger: 'blur' }
                    ],
                    filePath: [
                        { required: true, message: '请填写上传目录名', trigger: 'blur' }
                    ],
                    fileSave: [
                        { required: true, message: '请选择文件保存方式', trigger: 'change' }
                    ],
                    fileExtension: [
                        { required: true, message: '请填写允许文件上传扩展名', trigger: 'blur' }
                    ],
                    videoExtension: [
                        { required: true, message: '请填写允许视频上传扩展名', trigger: 'blur' }
                    ],
                    attachSize: [
                        { required: true, message: '请填写附件上传大小KB', trigger: 'blur' },
                        { pattern: /^[0-9]*[1-9][0-9]*$/, message: '只能输入整数', trigger: 'blur' }
                    ],
                    videoSize: [
                        { required: true, message: '请填写视频上传大小KB', trigger: 'blur' },
                        { pattern: /^[0-9]*[1-9][0-9]*$/, message: '只能输入整数', trigger: 'blur' }
                    ],
                    imgSize: [
                        { required: true, message: '请填写图片上传大小KB', trigger: 'blur' },
                        { pattern: /^[0-9]*[1-9][0-9]*$/, message: '只能输入整数', trigger: 'blur' }
                    ],
                    thumbnailMode: [
                        { required: true, message: '请选择缩略图生成方式', trigger: 'change' }
                    ],
                    watermarkType: [
                        { required: true, message: '请选择图片水印类型', trigger: 'change' }
                    ],
                    watermarkPosition: [
                        { required: true, message: '请选择图片水印位置', trigger: 'change' }
                    ],
                    watermarkPic: [
                        { required: true, message: '请填写图片水印文件路径', trigger: 'blur' }
                    ],
                    watermarkText: [
                        { required: true, message: '请填写文字水印内容', trigger: 'blur' }
                    ],
                    watermarkFont: [
                        { required: true, message: '请选择水印字体', trigger: 'change' }
                    ],
                    watermarkFontSize: [
                        { required: true, message: '请填写水印的文字大小', trigger: 'blur' }
                    ],
                    imageSize: [
                        { required: true, message: '请填写尺寸大小', trigger: 'blur' },
                        { pattern: /^[0-9]*[1-9][0-9]*$/, message: '只能输入整数', trigger: 'blur' }
                    ]
                }
            },
            methods: {
                //初始化数据
                initData: function () {
                    let _this = this; //当前页面
                    //查询系统设置
                    AxiosAjax({
                        url: '/setting/sysconfig',
                        beforeSend: function () {
                            _this.loading = true
                        },
                        success: function (res) {
                            //赋值给model
                            Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
                        },
                        complete: function () {
                            _this.loading = false
                        }
                    });
                    
                },
                //提交表单
                submitForm: function () {
                    let _this = this; //当前页面
                    //多个表单验证
                    const f1 = new Promise((resolve, reject) => {
                        _this.$refs['editForm1'].validate((valid) => {
                            if (valid) resolve()
                        });
                    });
                    const f2 = new Promise((resolve, reject) => {
                        _this.$refs['editForm2'].validate((valid) => {
                            if (valid) resolve()
                        });
                    });
                    const f3 = new Promise((resolve, reject) => {
                        _this.$refs['editForm3'].validate((valid) => {
                            if (valid) resolve()
                        });
                    });
                    const f4 = new Promise((resolve, reject) => {
                        _this.$refs['editForm4'].validate((valid) => {
                            if (valid) resolve()
                        });
                    });
                    Promise.all([f1, f2, f3, f4]).then(() => {
                        AxiosAjax({
                            method: 'put',
                            url: '/setting/sysconfig',
                            data: _this.model,
                            loading: true,
                            successMsg: '系统设置已成功修改',
                            success: function (res) {
                                //可写回调处理
                            }
                        });
                    })
                },
                //查询短信余额
                getSmsQuantity: function () {
                    let _this = this;
                    _this.smsloading = true;
                    AxiosAjax({
                        url: '/setting/sms/account/quantity',
                        success: function (res) {
                            _this.smsloading = false;
                            _this.smsquantity = res.data.message;
                        }
                    });
                },
                resetForm() {
                    window.history.back(-1);
                }
            },
            created: function () {
                //初始化数据
                this.initData();
            }
        })
    </script>
</body>
</html>
